import React, { useEffect, useState ,memo,useMemo,useCallback} from "react"
import { useHistory } from 'react-router-dom'
import { homeNav, homeBanner, homePage, homeNewest, homeLife, homeSchool } from "../../services/home"
import { myNav, myPage, myNewset } from "../../utils/interface"
import './Home.scss'
//引入组件
import HomeTab from '../../component/Home/HomeTab';
import HomeSwiper from '../../component/Home/HomeSwiper'
const Home: React.FC = () => {
    const [navList, setnavList] = useState<myNav[]>([])
    const [banner, setbanner] = useState<string>('')
    const [page, setPage] = useState<myPage[]>([])
    const [newest, setNewest] = useState<myNewset[]>([])
    const [life, setLife] = useState<myPage[]>([])
    const [carIndex, setCarindex] = useState<number>(0)
    const [school, setSchool] = useState<myNewset[]>([])
    let history = useHistory()
    let MyHomeTab = memo(HomeTab)
    let MyHomeSwiper=memo(HomeSwiper)
    let MyLife=useMemo(()=>life,[life])
    let Mybanner=useMemo(()=>banner,[banner])
    let MyPage=useMemo(()=>page,[page])
    let MyNewest=useMemo(()=>newest,[newest])
    let MyCarIndex=useMemo(()=>carIndex,[carIndex])
    let MySchool=useMemo(()=>school,[school])
    let MySetCarIndex=useCallback((str)=>{
        return setCarindex(str)
    },[])
    useEffect(() => {
        homeNav().then(res => {
            setnavList(res.data.rankCategoryList)
        })
        homeBanner().then(res => {
            setbanner(res.data.carouselList[0].image)
        })
        homePage().then(res => {
            setPage(res.data.dataList)
        })
        homeNewest().then(res => {
            setNewest(res.data.dataList)
        })
        homeLife().then(res => {
            setLife(res.data.dataList)
        })
        homeSchool().then(res => {
            setSchool(res.data.dataList)
        })
    }, [])
    function pushSearch() {
        history.push('/index/search')
    }
    return <div className='home' >
        <div className='search'>
            <input type="text" placeholder='搜索你想知道的一切排名' onClick={pushSearch}/>
        </div>
        <MyHomeTab navList={navList} carIndex={MyCarIndex} setCarIndex={MySetCarIndex}></MyHomeTab>
        <MyHomeSwiper banner={Mybanner} page={MyPage} newest={MyNewest} life={MyLife} school={MySchool} setCarIndex={MySetCarIndex} carIndex={MyCarIndex}></MyHomeSwiper>
    </div>
}
export default Home